<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <!-- 表单元素 -->
    <!-- action是提交到服务器接口地址 -->
    <form action="test.html" method="get/post">
        <!-- 表单元素 input -->
        <!-- 明文输入框 -->
        用户名:<input type="text" name="account" placeholder="请输入用户名">
        <br>
        <!-- 暗文输入框 -->
        密码:<input type="password" name="pwd" placeholder="请输入密码"><br>
        <!-- 单选按钮 -->
        性别:
        <br>
        <!-- 单选框默认情况不会出现互斥 如果想要出现互斥 给name一个相同的属性值 -->
        <!-- value表示真正提交给后台的值  -->
        <label for="man">
            男:<input id="man"  type="radio" name="gender" value="male">
        </label>

        女:<input type="radio" name="gender" value="female">
        <br>
        <!--  提交按钮-->
        <!-- 多选框 -->
        <!-- 水果 -->
        <br>
        水果:
        香蕉<input type="checkbox" name="fruit" value="banana">
        苹果<input type="checkbox" name="fruit" value="apple">
        橘子<input type="checkbox" name="fruit" value="orange">
        <!-- 文件上传 -->
        <!-- 附件上传 -->
        <input type="file" name="文件上传" >
        <!-- 普通按钮 配合js完成一些操作-->
        <input type="button" value="普通按钮" id="btn">
        <!-- 重置按钮 -->
        <!-- 重置按钮可以清空表单中填写的表单元素的值 -->
        <input type="reset" value="重置按钮">
        <!-- 隐藏域 -->
        <!-- 悄悄地默默的提交给服务器一些数据 -->
        <input type="hidden" name="token" value="wedfwiuehru23e234234981561616516">

        
        <input type="submit" value="提交">
    </form>
</body>
<script>
    // js的点击事件--event事件对象本身 形参
    btn.onclick=function(event){
        // 打印一下事件对象本身
        console.log(event);
        event.value='普通按钮1'
    }
</script>
</html>